<template>
    <view>
        <!-- pages/signin/signin.wxml -->
        <view class="topbox">
            <cu-custom :isShowicon="true" :isBack="true">
                <view slot="backText">返回</view>
                <view slot="content">签到</view>
            </cu-custom>
        </view>
        <view class="top">
            <image src="/static/images/qdbg.jpg" mode="widthFix"></image>
        </view>
        <view class="signbox bg-white">
            <view class="rl">
                <image src="/static/images/rl.png" mode="widthFix"></image>
            </view>
            <view class="signtext">
                当前连续签到
                <text>{{ number }}</text>
                天
            </view>
            <view class="flex align-center padding-lr margin-top">
                <view class="signitem flex-sub">
                    <text>+88</text>
                    <view class="signitempic">
                        <image v-if="number >= 1" src="/static/images/signpic2.png" mode="widthFix"></image>
                        <image v-else src="/static/images/signpic1.png" mode="widthFix"></image>
                    </view>
                    <view class="signitembot">第1天</view>
                </view>
                <view class="signitem flex-sub">
                    <text>+98</text>
                    <view class="signitempic">
                        <image v-if="number >= 2" src="/static/images/signpic2.png" mode="widthFix"></image>
                        <image v-else src="/static/images/signpic1.png" mode="widthFix"></image>
                    </view>
                    <view class="signitembot">第2天</view>
                </view>
                <view class="signitem flex-sub">
                    <text>+108</text>
                    <view class="signitempic">
                        <image v-if="number >= 3" src="/static/images/signpic2.png" mode="widthFix"></image>
                        <image v-else src="/static/images/signpic1.png" mode="widthFix"></image>
                    </view>
                    <view class="signitembot">第3天</view>
                </view>
                <view class="signitem flex-sub">
                    <text>+118</text>
                    <view class="signitempic">
                        <image v-if="number >= 4" src="/static/images/signpic2.png" mode="widthFix"></image>
                        <image v-else src="/static/images/signpic1.png" mode="widthFix"></image>
                    </view>
                    <view class="signitembot">第4天</view>
                </view>
            </view>
            <view class="flex align-center padding-lr margin-top">
                <view class="signitem flex-sub">
                    <text>+128</text>
                    <view class="signitempic">
                        <image v-if="number >= 5" src="/static/images/signpic2.png" mode="widthFix"></image>
                        <image v-else src="/static/images/signpic1.png" mode="widthFix"></image>
                    </view>
                    <view class="signitembot">第5天</view>
                </view>
                <view class="signitem flex-sub">
                    <text>+138</text>
                    <view class="signitempic">
                        <image v-if="number >= 6" src="/static/images/signpic2.png" mode="widthFix"></image>
                        <image v-else src="/static/images/signpic1.png" mode="widthFix"></image>
                    </view>
                    <view class="signitembot">第6天</view>
                </view>
                <view class="signitem flex-sub" style="flex: 2; margin-right: 0">
                    <text>+158</text>
                    <view class="signitempic" style="width: 46%">
                        <image v-if="number >= 7" src="/static/images/signpic2.png" mode="widthFix"></image>
                        <image v-else src="/static/images/signpic1.png" mode="widthFix"></image>
                    </view>
                    <view class="signitembot">第7天</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/signin/signin.js
const _api = require('../../utils/api.js');
const apiurl = require('../../utils/apiurl/public.js');
export default {
    data() {
        return {
            number: 0,
            userInfo: null
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        let user = uni.getStorageSync('getuser');
        if (user) {
            this.setData({
                userInfo: user,
                number: user.sign_days
            });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.getNumber();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        getNumber() {
            _api.get(apiurl.signrecord_add).then((res) => {
                if (res.data.code == 0) {
                    this.setData({
                        number: res.data.data.signin_days
                    });
                    uni.showToast({
                        title: '签到成功！',
                        icon: 'success'
                    });
                } else if (res.data.code == 102) {
                    uni.showToast({
                        title: '当日已签到！'
                    });
                }
            });
        }
    }
};
</script>
<style>
/* pages/signin/signin.wxss */
page {
    background: #fd9e00;
    padding-top: 110rpx;
}
.top image {
    width: 100%;
    display: block;
}
.signbox {
    margin: 0 50rpx 0 50rpx;
    position: relative;
    border-radius: 30rpx;
    height: 600rpx;
}
.rl {
    width: 205rpx;
    position: absolute;
    top: -50rpx;
    left: 50%;
    margin-left: -103rpx;
}
.rl image {
    width: 100%;
    display: block;
}
.signtext {
    text-align: center;
    font-size: 36rpx;
    color: #000000;
    padding-top: 90rpx;
}
.signtext text {
    display: inline-block;
    font-size: 50rpx;
    color: #fd9e00;
    padding: 8rpx 6rpx;
}
.signitem {
    background: #fef1e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-right: 20rpx;
    height: 180rpx;
    overflow: hidden;
    border: #d85353 solid 1px;
    border-radius: 12rpx;
}
.signitem:nth-child(4n) {
    margin-right: 0;
}
.signitem text {
    display: block;
    text-align: center;
    color: #cbad62;
    padding-top: 14rpx;
}
.signitempic {
    height: 80rpx;
    width: 100%;
}
.signitempic image {
    width: 100%;
    display: block;
}
.signitembot {
    height: 40rpx;
    text-align: center;
    font-size: 24rpx;
    line-height: 40rpx;
    padding-top: 0rpx;
    width: 100%;
    background: #ed4146;
    color: #ffffff;
}
</style>
